<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
import mixinsShowData from "@/components/mixinsShowData";
import apiConfig from "./../apiConfig";
export default {
    name: "SelectDataUsers",
    mixins: [mixinsShowData],
    components: {
        ImageBox: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.ImageBox()),
    },
    computed: {
        imageRotate() {
            let _s = {};
            _s["transform"] = "rotate(" + this.disX * 1.5 + "deg)";
            return _s;
        },
    },
    props: {
        // 接口列表
        apiConfig: {
            type: Object,
            default: apiConfig,
        },
    },
    data() {
        return {
            // 窗口显示
            boxVisible: false,

            rangestatus: false,
            disX: 0,

            imageUrl: "",
            change: null,
            loading: true,
        };
    },
    methods: {
        open(e) {
            console.error(e);
            this.imageUrl = e.imageUrl;

            this.change = e.change;
            this.boxVisible = true;
            this.loading = false;
        },
        update(e){
            console.error("update",e)
            this.open(e);
        },
        hide() {
            this.boxVisible = false;
            setTimeout(() => {
                this.imageUrl = "";

                this.change = null;
                this.loading = true;
            }, 500);
        },
        rangeMove(e) {
            let ele = e.target;
            let startX = e.clientX;
            this.rangestatus = true;
            // if (this.rangestatus) {
            //     // / /不运行
            //     return false;
            // }
            document.onmousemove = (e) => {
                let endX = e.clientX;
                let _c = endX - startX;
                if (_c > 240) {
                    return;
                }
                this.disX = _c;

                if (this.disX <= 0) {
                    this.disX = 0;
                }

                ele.style.transition = "0s all";
                ele.style.transform = "translateX(" + this.disX + "px)";
                e.preventDefault();
            };
            document.onmouseup = () => {
                ele.style.transition = ".5s all";
                ele.style.transform = "translateX(0)";
                this.rangestatus = false;
                //执行成功的函数

                this.change({
                    rotate: 360 - this.disX * 1.5,
                });

                this.disX = 0;
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
    },

    mounted() {},
    beforeCreate() {},
};
</script>